/** 这里是react实现方式**/
import './index.less';

import React, { useState, useEffect, useRef } from 'react'
import axios from 'axios';
interface IDirectVoucher {
    /** 标题 */
    title?: string;
    /** 副标题 */
    subTitle?: string;
}
interface ICardProps {
    data: IDirectVoucher;
}

const CardReact: React.FC<ICardProps> = (props) => {
    const { data } = props;
    const [count, setCount] = useState<number>(10);
    const timeRef = useRef<any>()//设置延时器
    useEffect(() => {
        if (count && count !== 0)
            timeRef.current = setTimeout(() => {
                setCount(time => time - 1)
            }, 1000);
        return () => {
            clearTimeout(timeRef.current);
        }
    }, [count]);
    const request=async()=>{
        return  new Promise((resolve, reject) =>
        setTimeout(() => {
            resolve("去抢购")
        }, 1000)
    )
    }
 async   function buy() {
        if (count === 0) {
               const res =  await  request();
               console.log(res);   
        }
    }
    return (
        <div className="card">
            <div >
                <span className='title'> {data.title}</span>
                <span className='subtitle'> {data.subTitle}</span>
            </div>
            <div onClick={buy}>{count === 0 ? '抢购' : count + 's'}</div>
        </div>
    );
};

const CardList: React.FC<{ list: IDirectVoucher[] }> = (props) => {
    return (
        <>
            {props.list.map((data, index) => (
                <CardReact key={index} data={data} />
            ))}
        </>
    );
};
type itemArr={
    name:string,
    id:number
}[]
enum Key{
   id='id',
   name="name",
}
const useItemList = ({ id= 1, page= 1, pageSize= 10 }) => {
    /* Your code here */
    const [myPage, setPage] = useState<number>(page);
    const [myPageSize, setMypageSize] = useState<number>(pageSize);
    // 默认降顺
    const [order, setOrder] = useState(true);
    // 默认某个字段排序
    const [key, setKey] = useState<Key>(Key.id)

    const [loading, setLoading] = useState<boolean>(false);
    const  [data, setData] = useState<itemArr>([]);
    const getData=async()=>{
        setLoading(true);
        const res=await ListItems();
        res?.data &&  setLoading(false);
    }
    useEffect(() => {
        getData();
    }, [myPage,myPageSize]);

    return {
        params:{
           page: myPage,
           PageSize:myPageSize,
           order:order,
           orderKey:key,
        },
        data,
        setPage,
        setMypageSize,
        loading,
     }
  }
 
  interface Api<T> {
    (p: T): Promise<{ items: any[]; page: number; pageSize: number }>;
  }
  /* 接口入参定义 */
  interface Params {
    id: number;
    page: number;
    pageSize: number;
  }
  
  /* ListItems接口可以直接使用，无需关心具体实现 */
//   const ListItems: Api<Params> = async (
//     p: Params,
//   ) => api('/listItems', GET, p);
export default CardList;

const promisifiedRequest = ({ id= 1 }) => {
    /* Your code here */
     return new Promise((resolve,reject)=>{
             axios.get('/api/login').then((res)=>{
                resolve(res);
             })
     })
  }
  const code=400;
  switch (true) {
      case code===400:
           
           break;
  
      default:
          break;
   }
 


 